<template>
  <view>
    <view class="add-roominfo">
      <view class="roominfomation">
        <view class="title">
          <text>房屋信息</text>
        </view>
        <view class="info-content">
          {{roomname}}
        </view>
      </view>
      <view class="yzinfo">
        <view class="title">
          <text>业主信息</text>
        </view>
        <view class="userinfo">
          <u--form labelPosition="left" ref="form" borderBottom :model="userform" :rules="rules">
            <u-form-item label="姓名" borderBottom labelWidth="104" prop="name">
              <u--input v-model="userform.name" border="none" placeholder="请填写您的真实姓名"
                placeholderStyle="font-size: 28rpx;color:#c3c3c5">
              </u--input>
            </u-form-item>

            <u-form-item label="性别" borderBottom labelWidth="104">
              <u-radio-group placement="row" v-model="userform.gender">
                <u-radio :label="item.sex" :name="item.name" v-for="(item,index) in sexlist" :key="index" labelSize="14"
                  activeColor="#5591af">
                </u-radio>
              </u-radio-group>
            </u-form-item>

            <u-form-item prop="mobile" borderBottom ref="item1" labelWidth="104" label="手机号">
              <u--input v-model="userform.mobile" border="none" placeholder="请输入您的手机号"
                placeholderStyle="font-size: 28rpx;color:#c3c3c5">
              </u--input>
              <block slot="right">
                <u-count-down @finish="onFinish" v-if="isShowCountDown" :time="10 * 1000" format="ss s后可重新发送">
                </u-count-down>
                <view v-else @click="getCode" class="code-btn">获取验证码</view>
              </block>
            </u-form-item>

            <u-form-item label="验证码" borderBottom labelWidth="104">
              <u--input v-model="code" border="none" placeholder="请输入手机验证码"
                placeholderStyle="font-size: 28rpx;color:#c3c3c5">
              </u--input>
            </u-form-item>
          </u--form>
        </view>
      </view>
      <view class="Idcard">
        <view class="title">
          上传本人身份证照片
        </view>
        <view class="message">
          请拍摄证件原件，并使照片中证件边缘完整，文字清晰，光线均匀。
        </view>
        <view class="id-img" @click="openFile">
          <view v-if="!userform.idcardFrontUrl" class="id-content">
            <image src="../../static/icon/add.png" mode="" style="width:40rpx ;height: 40rpx;"></image>
            <text>上传人像面照片</text>
          </view>
          <image v-else :src="userform.idcardFrontUrl"></image>
        </view>
        <view class="id-img" @click="openFile1">
          <view v-if="!userform.idcardBackUrl" class="id-content">
            <image src="../../static/icon/add.png" mode="" style="width:40rpx ;height: 40rpx;"></image>
            <text>上传国徽面照片</text>
          </view>
          <image v-else :src="userform.idcardBackUrl"></image>
        </view>
      </view>

    </view>
    <view class="footer-submit">
      <life-button icon="../../static/icon/check.png" @click.native="onsubmit">提交审核</life-button>
    </view>

    <!-- 模拟短信提示 -->
    <u-notify @click.native="copyCode" ref="uNotify"></u-notify>
  </view>
</template>

<script>
  import {
    sendCode,
  } from '@/api/login.js'
  import {
    addHouseList
  } from "@/api/house.js"
  export default {
    data() {
      return {
        // 房屋信息
        roomname: '',
        // 用户信息
        userform: {
          point: '',
          building: '',
          room: '',
          name: '',
          gender: 1,
          mobile: '18900000000',
          idcardFrontUrl: '',
          idcardBackUrl: '',
        },
        // 男女
        sexlist: [{
          sex: "男",
          name: 1
        }, {
          sex: "女",
          name: 0
        }],
        // 验证码
        code: '',
        // 定时器倒计时
        isShowCountDown: false,
        rules: {
          name: [{
              required: true,
              message: '请输入真实姓名',
              trigger: ['change', 'blur'],
            },
            {
              pattern: /^(([a-zA-Z+\.?\·?a-zA-Z+]{2,30}$)|([\u4e00-\u9fa5+\·?\u4e00-\u9fa5+]{2,30}$))/,
              message: '姓名格式不正确',
              trigger: ['change', 'blur'],
            }
          ],
          mobile: [{
              required: true,
              message: '请输入手机号',
              trigger: ['change', 'blur'],
            },
            {
              pattern: /^((\+|00)86)?1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/,
              message: '手机号码格式不正确',
              trigger: ['change', 'blur'],
            }
          ]
        }
      }
    },
    onLoad(options) {
      console.log(options);
      this.roomname = options.area + options.building + options.roomnumber
      this.userform.point = options.area
      this.userform.building = options.building
      this.userform.room = options.roomnumber
    },
    methods: {
      // 打开文件选择器
      openFile() {
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
          success: (res) => {
            console.log(res.tempFilePaths);
            this.userform.idcardFrontUrl = res.tempFilePaths[0]
          }
        });
      },
      // 打开文件选择器
      openFile1() {
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
          success: (res) => {
            console.log(res.tempFilePaths);
            this.userform.idcardBackUrl = res.tempFilePaths[0]
          }
        });
      },

      getCode() {
        // 校验手机号
        this.$refs.form.validateField('mobile', async (errRes) => {
          if (errRes.length) return
          // 手机号合法，发请求
          const res = await sendCode(this.userform.mobile)
          // message
          const message = `【享+生活】验证码：${res.data.code}.您正在使用短信验证码功能，验证码提供他人可能导致账号被盗，请勿转发或泄漏。`
          this.code = res.data.code
          // 短信提示
          this.$refs.uNotify.show({
            top: 10,
            type: 'success',
            message: message,
            duration: 1000 * 6,
            fontSize: 14
          })
          // 震动
          uni.vibrateLong()
          // 显示倒计时
          this.isShowCountDown = true
        })
      },
      // 倒计时结束
      onFinish() {
        this.isShowCountDown = false
      },
      // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
      onReady() {
        this.$refs.form.setRules(this.rules);
      },
      // 提交用户信息
      onsubmit() {
        this.$refs.form.validate().then(async res => {
          await addHouseList(this.userform)
          if (this.code === '') return
          uni.navigateTo({
            url: '/pkg-house/house/house'
          })
        }).catch(errors => {
          console.log(errors);
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .add-roominfo {
    padding-bottom: 300rpx;
    height: 100%;
    background: #fafafa;

    .roominfomation {
      .title {
        padding-left: 30rpx;
        height: 86rpx;
        color: #979797;
        font-family: PingFang SC;
        font-weight: regular;
        font-size: 24rpx;
        line-height: 86rpx;
      }

      .info-content {
        padding-left: 30rpx;
        height: 102rpx;
        background-color: #fff;
        color: #333333;
        font-family: PingFang SC;
        font-weight: regular;
        font-size: 28rpx;
        line-height: 102rpx;
      }
    }

    .yzinfo {
      .title {
        padding-left: 30rpx;
        height: 86rpx;
        color: #979797;
        font-family: PingFang SC;
        font-weight: regular;
        font-size: 24rpx;
        line-height: 86rpx;
      }

      .userinfo {
        padding-left: 30rpx;
        background-color: #fff;
        margin-bottom: 30rpx;
        padding-right: 30rpx;
        box-sizing: border-box;
      }
    }

    .Idcard {
      padding-left: 30rpx;
      background: #FFFFFF;
      padding-top: 30rpx;
      padding-bottom: 30rpx;

      .title {
        color: #333333;
        font-family: PingFang SC;
        font-weight: regular;
        font-size: 28rpx;
        line-height: 1.5;
        letter-spacing: 0rpx;
        text-align: left;
        margin-bottom: 10rpx;
      }

      .message {
        color: #C3C3C5;
        font-family: PingFang SC;
        font-weight: regular;
        font-size: 22rpx;
        line-height: 1.5;
        letter-spacing: 0rpx;
        text-align: left;
        margin-bottom: 41rpx;
      }
    }

    .id-img {
      width: 690rpx;
      height: 340rpx;
      border-radius: 10rpx;
      background: #FAFAFA;
      margin-bottom: 20rpx;
      box-sizing: border-box;
      padding: 5rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 100%;
        height: 100%;
      }

      .id-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        text {
          color: #7694B0;
          font-family: PingFang SC;
          font-weight: regular;
          font-size: 30rpx;
          line-height: 1.5;
          letter-spacing: 0rpx;
          text-align: center;
        }
      }
    }
  }

  ::v-deep .u-radio.data-v-5dfbf8b1 {
    margin-right: 30rpx;
  }

  ::v-deep .u-radio__icon-wrap--circle {
    width: 14px !important;
    height: 14px !important;
  }

  ::v-deep .u-form {
    margin-top: 22rpx;

    .code-btn {
      color: #5591AF;
      font-size: 28rpx;
    }

    .u-form-item {
      .u-form-item__body {
        height: 103rpx;
        padding: 0;
      }

      .u-count-down__text {
        font-size: 28rpx;
        color: #5591AF;
      }

      .u-form-item__body__right__message {
        margin-left: 0 !important;
        // margin-top: -30rpx;
      }
    }
  }
</style>
